<template>
	<view class="no-login-box flex-row-center" v-if="!token">
		<view class="no-login-left">
			<text class="tips">登录解锁更多功能</text>
		</view>
		<view class="no-login-right flex-center" @click="toLogin">
			<text class="text">立即登录</text>
		</view>
	</view>
</template>

<script setup>
	const token = ref('')
	onShow(()=>{
		token.value=uni.getStorageSync('user_token');
	})
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	.no-login-box {
		width: 680rpx;
		height: 100rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(190, 230, 252, 0.3);
		position: fixed;
		bottom: 220rpx;
		left: 50%;
		background: $no-login-bg;
		transform: translateX(-50%);
		padding: 20rpx;
		justify-content: space-between;

		.tips {
			color: $title-color;
			font-size: 30rpx;
		}

		.no-login-right {
			background: $btn-bg-color;
			padding: 12rpx 20rpx;
			border-radius: 8rpx;

			.text {
				font-size: 28rpx;
				color: $btn-text-color;
				font-weight: bold;
			}
		}
	}
</style>